<script lang="ts" setup>
import { ref } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { Value, Config, Components } from '@/components/demo/screening/screening';

const props = withDefaults(defineProps<{ config: Config[]; span?: number }>(), {
  span: 6
});
const emit = defineEmits(['update:config', 'search']);

// 处理下拉 options 传入异步函数
const loadOptions = ref<boolean>(true);
const optionsFns: { config: Config; options: Function }[] = [];
const initPropsConfig = async () => {
  props.config?.forEach((config) => {
    if (config?.bind?.options && typeof config?.bind?.options === 'function') {
      optionsFns.push({ config, options: config.bind.options() });
    }
  });
  if (optionsFns.length > 0) {
    const result = await Promise.all(optionsFns.map((ob) => ob.options));
    for (let i = 0; i < optionsFns.length; i++) {
      optionsFns[i].config.bind!.options = result[i];
    }
  }
  loadOptions.value = false;
};
initPropsConfig();
// 查询
const searchHandle = () => {
  const data: { [key: string]: Value } = {};
  props.config?.forEach((config) => {
    data[config.key] = config.value;
  });
  emit('search', data);
};
// 重置
const resetHandle = () => {
  props.config.forEach((d) => {
    d.value = d.defaultValue!;
  });
  emit('update:config');
};

const filterComponent = (component: Components) =>
  typeof component === 'string' && ['el-cascader'].indexOf(component) !== -1;
const componentBind = (config: Config) => {
  if (filterComponent(config.component)) {
    if (!loadOptions.value) return config.bind;
    return {};
  }
  if (config.component === 'el-tree-select') {
    config.bind.icon = 'ele-ArrowRight';
  }
  return config.bind;
};
</script>

<template>
  <el-input v-if="false"></el-input>
  <div class="screening-container flex justify-between">
    <div class="screening-left flex items-start">
      <el-row class="screening-left-list">
        <el-col
          :class="[{ 'col-auto': props.config.length <= 4, 'flex-0-auto': config.flexAuto }]"
          :span="config.span || span"
          :key="config.key"
          v-for="config of props.config"
        >
          <div class="flex items-center ml-2 mt-2">
            <span class="label mr-2" v-if="config.label">{{ config.label }}</span>
            <component
              class="w-full"
              :is="config.component"
              v-model="config.value"
              v-on="{ ...config.on }"
              v-bind="componentBind(config)"
            >
              <template #default v-if="!filterComponent(config.component)">
                <slot :name="`${config.key}`" :config="config"></slot>
              </template>
              <template #prefix v-if="config?.bind?.prefix">
                <slot :name="`prefix_${config.key}`" :config="config"></slot>
              </template>
              <template #suffix v-if="config?.bind?.suffix">
                <slot :name="`suffix_${config.key}`" :config="config"></slot>
              </template>
            </component>
          </div>
        </el-col>
      </el-row>
      <div class="flex flex-nowrap ml-2 mr-2">
        <el-button :icon="Search" circle @click="searchHandle" />
        <el-button type="danger" :icon="Refresh" circle @click="resetHandle" />
      </div>
      <slot name="sr-left"></slot>
    </div>
    <div class="screening-right flex flex-nowrap ml-2">
      <slot name="sr-right"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screening-container {
  ::v-deep(.el-date-editor) {
    --el-date-editor-width: 100%;
  }
  ::v-deep(.el-input-number) {
    width: 100%;
  }
  .screening-left {
    min-width: 800px;
    max-width: 1440px;
    &-list {
      margin-top: -0.5rem;
      margin-left: -0.5rem;
      .label {
        white-space: nowrap;
        font-size: 14px;
        color: #335b6f;
      }
      .col-auto {
        max-width: unset;
        flex: unset;
      }

      .flex-0-auto {
        max-width: unset;
        flex: 0 0 auto;
      }
    }
  }
}
</style>
